[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import VirtualStage from "@/components/virtual-stage" export default function Home() { return } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --gradient-angle: 120deg; --gradient: linear-gradient(var(--gradient-angle), #0066ff 0%, #5c00ff 50%, #8a00ff 100%); } body { font-family: Arial, Helvetica, sans-serif; background-color: black; color: white; margin: 0; padding: 0; overflow: hidden; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-black text-white; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { black: "#000000", white: "#ffffff", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "gsap": "^3.12.5" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/virtual-stage.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" import gsap from "gsap" export default function VirtualStage() { const containerRef = useRef(null) const svgRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { if (!containerRef.current || !svgRef.current) return // Set loaded state to trigger animation setIsLoaded(true) // Get all rectangle elements const rects = Array.from(svgRef.current.querySelectorAll("rect")) // Reverse the array to animate from inside to outside const rectsFromInside = [...rects].reverse() // Create the initial state - scaled down, invisible, and thin stroke gsap.set(rectsFromInside, { scale: 0.5, opacity: 0, transformOrigin: "center center", }) // Create the staggered entrance animation - faster and smoother gsap.to(rectsFromInside, { scale: 1, opacity: 1, duration: 0.8, // Faster animation stagger: 0.05, // Faster stagger ease: "back.out(1.3)", // Smoother overshoot delay: 0.1, }) // Create a subtle pulse animation after entrance const tl = gsap.timeline({ repeat: -1, yoyo: true, delay: 1.5 }) tl.to(rectsFromInside, { scale: 1.01, // Smaller scale change for subtlety duration: 1.5, // Smoother, longer duration stagger: { each: 0.03, // Faster stagger from: "start", // Start from inside }, ease: "sine.inOut", // Smooth sine wave }) // Add mouse move effect for gradient const handleMouseMove = (e: MouseEvent) => { const rect = containerRef.current!.getBoundingClientRect() const x = (e.clientX - rect.left) / rect.width const y = (e.clientY - rect.top) / rect.height // Adjust gradient angle based on mouse position gsap.to("#gradient", { duration: 0.3, // Faster response attr: { x1: 0.5 - (x - 0.5) * 0.5, y1: 0.5 - (y - 0.5) * 0.5, x2: 0.5 + (x - 0.5) * 0.5, y2: 0.5 + (y - 0.5) * 0.5, }, ease: "power1.out", }) } containerRef.current.addEventListener("mousemove", handleMouseMove) return () => { tl.kill() containerRef.current?.removeEventListener("mousemove", handleMouseMove) } }, []) // Create array of concentric rectangles with DOUBLED spacing and THICKER lines const rects = Array.from({ length: 10 }).map((_, i) => { // DOUBLED spacing between rectangles (12.4 instead of 6.2, 14.4 instead of 7.2) const width = 76 - i * 12.4 // Doubled spacing const height = 96 - i * 14.4 // Doubled spacing // Calculate progressive roundness - inner is less rounded, outer is more rounded // For the innermost rectangle (i=9), roundness is 20% // For the outermost rectangle (i=0), roundness is 80% const roundnessPercent = 20 + ((9 - i) / 9) * 60 // Maps from 20% to 80% const roundness = (width * roundnessPercent) / 100 // Calculate progressive thickness - inner is thinner, outer is thicker // INCREASED thickness range from 0.8 to 2.4 (doubled from previous 0.4-1.2) const thickness = 0.8 + ((9 - i) / 9) * 1.6 // Maps from 0.8 to 2.4 return { width: width, height: height, rx: roundness, // Progressive rounded corners x: (100 - width) / 2, y: (100 - height) / 2, strokeWidth: thickness.toFixed(2), // Progressive thickness } }) return (

{/* Center content */}

Nest

Virtual
Stage

) }

About

Tags

Share

About

Tags

Share

More from catalinss

More Templates Like This

About

Tags

Share

About

Tags

Share

More from catalinss

More Templates Like This